<template>
	<div class="order-card" v-if="data">
		<div class="header">
			<span class="time">下单时间：{{ data.create_time_text }}</span>
			<span class="status">{{ data.status_text }}</span>
		</div>
		<div class="body">
			<van-card
				v-for="item in products"
				:key="item.id"
				class="cord"
				:num="item.pronum"
				:price="item.total"
				:desc="'单价：￥' + item.products.price"
				:title="item.products.name"
				:thumb="item.products.thumbs_text[0]" />
			<p class="more" v-if="data.productList.length > 2">点击详情查看更多商品</p>
		</div>
		<div class="_footer">
			<van-divider class="_footer-divider" />
			<div class="info">
				<div class="price">
					总价：<span>
						<span class="unit">￥</span><span>{{ data.amount }}</span>
					</span>
				</div>
				<div class="btns">
					<van-button type="primary" round size="small" @click="emits('detail', data)">详情</van-button>

					<!-- 已支付 -->
					<van-button
						type="danger"
						round
						size="small"
						v-if="data.status == '1'"
						@click="emits('cancel', data)">
						取消订单
					</van-button>

					<!-- 已发货 -->
					<van-button
						type="success"
						round
						size="small"
						v-if="data.status == '2'"
						@click="emits('receive', data)"
						>确认收货</van-button
					>
					<van-button
						type="default"
						round
						size="small"
						v-if="data.status == '2' && data.expresscode"
						@click="emits('express', data)">
						查看物流
					</van-button>
					<van-button
						type="danger"
						round
						size="small"
						v-if="data.status == '2' || data.status == '3'"
						@click="emits('return', data)">
						申请退货
					</van-button>

					<van-button
						type="primary"
						round
						size="small"
						v-if="data.status == '-3' && !data.return_shipped"
						@click="emits('returnInfo', data)">
						填写退货信息
					</van-button>

					<!-- 已收货 -->
					<van-button
						type="warning"
						round
						size="small"
						v-if="data.status == '3'"
						@click="emits('comment', data)">
						去评价
					</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	data: {
		type: Object,
	},
});

const emits = defineEmits(['detail', 'cancel', 'express', 'comment', 'receive', 'return', 'returnInfo']);

const products = computed(() => {
	if (!props.data) return [];

	return props.data.productList.slice(0, 2);
});
</script>

<style scoped lang="scss">
.order-card {
	border-radius: 8px;
	overflow: hidden;
	width: calc(100% - 10px);
	margin: 5px;
	background-color: #fff;
	padding: 8px 0;
	.header {
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		margin-bottom: 6px;
		.time {
			font-size: 12px;
			color: #888;
		}
		.status {
			// color: ;
			font-size: 13px;
			font-weight: 700;
		}
	}
	.body {
		.cord {
			background-color: #fff;
		}
		.more {
			font-size: 12px;
			color: #999;
			text-align: center;
		}
	}
	._footer {
		padding: 0 10px;
		.info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price {
				font-size: 12px;

				color: #999;
				.unit {
					font-size: 12px;
				}
				span {
					font-weight: 700;
					font-size: 14px;
					color: #f50a07;
				}
			}
			.btns {
				flex: 1;
				text-align: end;
				button {
					margin-left: 10px;
					height: 28px;
					padding: 0 10px;
				}
			}
		}
		._footer-divider {
			margin: 10px;
		}
	}
}
</style>
